import { Grid, Tag } from 'antd'

const { useBreakpoint } = Grid

const ExplorePC = () => {
  const screens = useBreakpoint()

  /**
   * 生成这些 sm md lg xl xxl 标签。
   * 那么这里可以尝试根据屏幕的大小修改导航栏，让它变成图标。
   */
  return (
    <>
      Current break point:{' '}
      {Object.entries(screens)
        .filter((screen) => !!screen[1])
        .map((screen) => (
          <Tag color="blue" key={screen[0]}>
            {screen[0]}
          </Tag>
        ))}
    </>
  )
}

export default ExplorePC
